<template>
  <div class="user-box">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="请输入货车号">
        <el-input v-model="idForQuery" placeholder=""></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>

    <div class="mapContainer">
      <map-position :points="points"></map-position>
    </div>

    <el-row style="margin-top: 1px">
      <el-col :span="8"><div class="grid-content bg-purple">卡车编号：{{id}}</div></el-col>
      <el-col :span="8"><div class="grid-content bg-purple-light">卡车类型： {{type}}</div></el-col>
      <el-col :span="8"><div class="grid-content bg-purple">卡车车牌： {{plate}}</div></el-col>
    </el-row>
    <el-table :data="users" style="width: 100%">
      <el-table-column prop="time" label="时间" width="180">
      </el-table-column>
      <el-table-column prop="type" label="状态" width="50">
      </el-table-column>
      <el-table-column prop="source" label="出发地址">
      </el-table-column>
      <el-table-column prop="destination" label="目的地址">
      </el-table-column>
      <el-table-column prop="eventId" label="运输事件编号" width="120">
        <template slot-scope="scope">
          <el-popover trigger="click" placement="left" >
            <el-table :data="packages" style="width: 100%">
              <el-table-column prop="id" label="包裹id"></el-table-column>
              <el-table-column prop="customerId" label="顾客id"></el-table-column>
              <el-table-column prop="sender" label="寄件信息"></el-table-column>
              <el-table-column prop="recipient" label="收件信息"></el-table-column>
              <el-table-column prop="weight" label="包裹重量"></el-table-column>
              <el-table-column prop="createTime" label="寄件时间"></el-table-column>
              <el-table-column prop="timeliness" label="约定送达时间"></el-table-column>
              <el-table-column prop="fare" label="费用"></el-table-column>
            </el-table>
            <div slot="reference" class="name-wrapper">
              <el-button @click="getPackagesByEventId(scope.row.eventId)">{{ scope.row.eventId }}</el-button>
            </div>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
  import * as requires from '../network/require'
  import mapPosition from "./mapPosition";

  export default {
    name: 'Trunk',
    components: {
      mapPosition
    },
    data () {
      return {
        idForQuery: 1,
        users: [],
        id: 1,
        plate: '',
        type: '',
        points: [],
        packages: []
      }
    },
    mounted () {
      this.getUsers(this.idForQuery)
    },
    methods: {
      onSubmit(){
        this.getUsers(this.idForQuery);
      },
      getUsers (idForQuery) {
        this.loading = true
        requires.getTrunkTrace(idForQuery).then((res) => {
          const data = res.data;
          this.users = data.trace.map((item) => {
            if (item.type === 'in') {
              item.type = '进仓'
            } else {
              item.type = '出仓'
            }
            return item;
          });
          this.id = data.id;
          this.plate = data.plate;
          this.type = data.type;
          this.points = data.points;
          // this.users = res.data.trace;
        }).catch((err) => {
          console.error(err)
        })
      },
      getPackagesByEventId(eventId) {
        requires.getPackagesByEventId(eventId).then((res) => {
          this.packages = res.data;
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .mapContainer {
    position: relative;
    margin: 20px auto 50px;
    height: 354px;
    width: 95%;
  }

  .el-row {
    margin-bottom: 8px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }

  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    padding-left: 30px;
    line-height: 36px;
    border-radius: 4px;
    min-height: 36px;
    color: #606266;
  }

</style>
